<template>
  <view>
    <view class="big">
      <view class="photo">
        <view class="photo_frame" @click="toLogin()">
          <image src="/static/JZ.png" mode=""></image>
        </view>
        <view class="" style="color: #C8A556;font-size: 35rpx;">{{token.userName||'账号名称'}}</view>
        <view class="" style="margin: 10rpx 0;" @click="toggle('center')">
          <text>身份({{radio1==2?'个人':'企业'}}用户)</text>
        </view>
        <view class="" style="font-size: 30rpx;color: #cccccc;">{{token.checkAuth==0?'未实名':'已实名'}}</view>
      </view>
      <view class="Sign">
        <view class="">
          <image src="../../static/qm.png" mode=""></image>
        </view>
        <navigator class="usrename" style="margin: 0 auto;display: inline-block;" url="/subpkg/signature/signature">
          用户签名
        </navigator>
      </view>
      <view class="">
        <view class="pagack">
          <view class="pagack_text">
            <view class="" style="color: #fff;font-size: 36rpx;">我的套餐</view>
            <view class="" style="color: #fff;font-size: 25rpx;">剩余合同数量:
              <text style="font-size:50rpx;margin: auto 10rpx;">{{copies[0].copies||0}}</text>份
            </view>
          </view>
          <view class="text-wrapper_2">
            <text lines="1" class="paragraph_4" @click="purchaseContract()">购买<br />套餐
            </text>
          </view>
        </view>
      </view>

      <uni-popup ref="popup" background-color="#fff">
        <view class="">
          <view class="popup-content" :class="{ 'popup-height': type === 'center' || type === 'center' }">
            <view class="box_T">
              <uni-data-checkbox selectedColor="black" v-model="radio1" :localdata="select" @change="changeState"></uni-data-checkbox>

            </view>
          </view>
        </view>
      </uni-popup>

    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex"
  export default {
    data() {
      return {
        token:{},//用户信息
        radio1:1,
        select: [{
          text: '个人',
          value: 2
        }, {
          text: '企业',
          value: 1
        }]
      }
    },
    onLoad() {},
    mounted() {
      this.getSurplus()
      const value = uni.getStorageSync("token");
      this.radio1=parseInt(value.userType)
      this.token=value
      if(!this.token){
        let title='请登录'
        uni.$showMsg(title)
      }
    },
    methods: {
      toggle(type) {
        this.type = type
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(type)
      },
      toLogin() {
        uni.redirectTo({
          url: "/subpkg/login/login"
        })
      },
      purchaseContract() {
        uni.navigateTo({
          url: '../../subpkg/buy/buy'
        })
      },
      getSurplus() {
        this.$store.dispatch('my/getSurplus')
      },
      changeState(e){
        console.log(e.detail.value)
        this.$store.dispatch('login/userChange')
      }
    },
    computed: {
      ...mapState({
        copies: state => state.my.copies,
      })
    },
    watch:{
    }
  }
</script>

<style>
  .box_T {
    width: 400rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .big {
    height: 1478rpx;
    background-color: rgba(242, 242, 242, 1.000000);

  }

  .text-wrapper_2 {
    height: 176rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/hau.png?sign=9308cc6e06bf61c59b0742d39f4f9746&t=1659501409) -5rpx 0rpx no-repeat;
    background-size: 175rpx 195rpx;
    display: flex;

    width: 160rpx;
    margin: auto 70rpx auto 0;
  }

  .paragraph_4 {
    /* text-shadow: 3px 4px 8px rgba(24, 24, 24, 0.890000); */
    width: 60rpx;
    height: 65rpx;
    overflow-wrap: break-word;
    color: rgba(200, 165, 86, 1);
    font-size: 30rpx;
    /* font-family: Adobe Heiti Std R; */
    /* line-height: 65rpx; */
    margin: 64rpx 0 0 50rpx;
  }

  .photo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 60rpx;
  }

  .photo image {

    width: 162rpx;
    height: 162rpx;
    text-align: center;
    border: 5px solid #fff;
    border-radius: 50%;
  }

  .Sign {
    position: relative;
    width: 80%;
    height: 165rpx;

    padding-left: 77rpx;
    margin: 0 auto;
    margin-top: 100rpx;
    background-color: #fff;
    border-radius: 30rpx;
  }

  .Sign image {
    width: 103rpx;
    height: 108rpx;
    margin-top: 32rpx;
    /* margin-left: 77rpx; */
  }

  .usrename {
    position: absolute;
    left: 265rpx;
    top: 55rpx;
    opacity: 0.52;
    font-size: 50rpx;
  }

  .pagack {
    background-image: url('https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/qqweq.png?sign=c3018dbd94fa8f1de06050dd99330ff7&t=1659600628');
    background-size: cover;

    width: 668rpx;
    height: 258rpx;
    /* padding: 77rpx 17rpx 0 60rpx; */
    margin: 0 auto;
    margin-top: 67rpx;
    /* border: #C8A556 1px solid; */
    display: flex;
    justify-content: space-between;


  }

  .pagack_text {

    margin: auto 0 auto 75rpx;
  }
</style>
